<template>
  <view class="container">
    <view class="c-header">首次储值需设置支付密码</view>

    <view class="password-section">
      <!-- 设置密码 -->
      <view class="password-title">设置6位数字密码</view>
      <view class="password-inputs" @click="onPasswordClick">
        <view
          v-for="index in 6"
          :key="index"
          class="input-box"
          :class="{
            filled: password[index - 1],
            'show-cursor':
              activeField === 'password' && cursorIndex === index - 1 && !password[index - 1],
          }"
        >
          {{ password[index - 1] ? '•' : '' }}
        </view>
        <!-- 隐藏 input -->
        <input
          class="hidden-input"
          type="text"
          inputmode="numeric"
          maxlength="6"
          v-model="inputValue"
          @input="onInput"
          :focus="isFocused"
          @paste.prevent
        />
      </view>

      <!-- 确认密码 -->
      <view class="password-title">确认6位数字密码</view>
      <view class="password-inputs" @click="onConfirmClick">
        <view
          v-for="index in 6"
          :key="index"
          class="input-box"
          :class="{
            filled: confirmPassword[index - 1],
            'show-cursor':
              activeField === 'confirm' &&
              confirmCursorIndex === index - 1 &&
              !confirmPassword[index - 1],
          }"
        >
          {{ confirmPassword[index - 1] ? '•' : '' }}
        </view>
        <input
          class="hidden-input"
          type="text"
          inputmode="numeric"
          maxlength="6"
          v-model="confirmInputValue"
          @input="onConfirmInput"
          :focus="confirmFocused"
          @paste.prevent
        />
      </view>

      <!-- 错误提示 -->
      <view v-if="passwordError" class="error-message"> 请确保两次密码输入一致 </view>

      <!-- 信息提示 -->
      <view class="info-message"> 系统将自动验证两次密码是否一致 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(["refreshDataList"]);
// 当前激活的输入区域
const activeField = ref(null) // 'password' 或 'confirm'

// 设置密码
const inputValue = ref('')
const password = ref(['', '', '', '', '', ''])
const isFocused = ref(false)
const cursorIndex = ref(0)

// 确认密码
const confirmInputValue = ref('')
const confirmPassword = ref(['', '', '', '', '', ''])
const confirmFocused = ref(false)
const confirmCursorIndex = ref(0)

// 错误提示
const passwordError = ref(false)

// --- 点击设置密码 ---
const onPasswordClick = () => {
  activeField.value = 'password'
  isFocused.value = true
  confirmFocused.value = false

  const firstEmpty = password.value.findIndex((d) => !d)
  cursorIndex.value = firstEmpty === -1 ? 5 : firstEmpty
}

// --- 输入处理：设置密码 ---
const onInput = (e) => {
  const value = e.detail.value.replace(/[^0-9]/g, '').slice(0, 6)
  inputValue.value = value

  for (let i = 0; i < 6; i++) {
    password.value[i] = value[i] || ''
  }

  const nextEmpty = password.value.findIndex((d) => !d)
  cursorIndex.value = nextEmpty === -1 ? 5 : nextEmpty

  if (value.length === 6 && confirmInputValue.value.length === 6) {
    passwordError.value = value !== confirmInputValue.value
  } else {
    passwordError.value = false
  }
}

// --- 点击确认密码 ---
const onConfirmClick = () => {
  activeField.value = 'confirm'
  confirmFocused.value = true
  isFocused.value = false

  const firstEmpty = confirmPassword.value.findIndex((d) => !d)
  confirmCursorIndex.value = firstEmpty === -1 ? 5 : firstEmpty
}

// --- 输入处理：确认密码 ---
const onConfirmInput = (e) => {
  const value = e.detail.value.replace(/[^0-9]/g, '').slice(0, 6)
  confirmInputValue.value = value

  for (let i = 0; i < 6; i++) {
    confirmPassword.value[i] = value[i] || ''
  }

  const nextEmpty = confirmPassword.value.findIndex((d) => !d)
  confirmCursorIndex.value = nextEmpty === -1 ? 5 : nextEmpty

  if (inputValue.value.length === 6 && value.length === 6) {
    passwordError.value = inputValue.value !== value
  } else {
    passwordError.value = false
  }
   emit("refreshDataList", {password: confirmInputValue.value, passwordError: passwordError.value });
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
.container {
  padding: 20px;

  background: #f7f7f7;
  margin: 0 32rpx;
  border-radius: 16rpx;
}

.c-header {
  /* font-weight: bold; */
  margin-bottom: 20px;
  font-size: 28rpx;
  font-weight: $font-medium-weight;
  color: #000000;
}

.password-section {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
}

.password-title {
  text-align: center;
  margin-bottom: 10px;
  color: #999999;
  font-size: 24rpx;
}

.password-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

.input-box {
  width: 40px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  position: relative;
}

.input-box.filled {
  border-color: #007aff;
  background-color: #f0f8ff;
}

/* 光标闪烁效果 */
.input-box.show-cursor::after {
  content: '|';
  position: absolute;
  font-weight: normal;
  color: #000;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* 隐藏 input */
.hidden-input {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 错误提示 */
.error-message {
  color: #f00;
  font-size: 24rpx;
  text-align: center;
  margin-bottom: 10px;
}

/* 信息提示 */
.info-message {
  color: #999999;
  font-size: 24rpx;
  text-align: center;
  margin-top: 10px;
}
</style>
